import React from "react";
import { InferGetStaticPropsType } from "next";
// import Image from "next/image";

import { reqGetArticleDetail, reqGetArticles } from "../../api";

export async function getStaticPaths() {
  // 请求所有文章数据
  const res = await reqGetArticles();
  const articles = res.data.data;
  // 将文章数据的id组成路径返回
  const paths = articles.map((article) => {
    return `/post/${article.id}`;
  });

  return {
    // 需要提前预渲染（getStaticProps得到数据渲染到页面上）的页面地址
    // paths: [
    //   // "/post/7105929809770840078"
    // ],
    paths,
    // 访问没有提前预渲染的页面，触发getStaticProps请求数据，在渲染
    fallback: true,
    // 访问没有提前预渲染的页面，直接跳转到404
    // fallback: false,
  };
}

// 动态路由使用getStaticProps，必须还要使用getStaticPaths
export async function getStaticProps({ params }: any) {
  const { id } = params;

  const res = await reqGetArticleDetail(id);
  // 必须返回一个对象
  // 对象中props属性得值，就会传递给当前组件
  return {
    props: {
      articleDetail: res.data.data,
    },
  };
}

function Post({ articleDetail }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div>
      <li>{articleDetail.title}</li>
      <li>{articleDetail.author}</li>
      <li>
        <img src={articleDetail.avatar} width={50} height={50} alt={articleDetail.author} />
      </li>
      <li>{articleDetail.content}</li>
    </div>
  );
}

export default Post;
